# Docker多阶段构建文件
# 用于构建前端应用的Docker镜像
# 如果需要用 cicd ，请设置环境变量：
# variables:
#     DOCKER_BUILDKIT: 1

# 第一阶段：基础环境设置
# 使用Node.js 20精简版作为基础镜像
FROM node:20-slim AS base
# 设置PNPM包管理器的环境变量
ENV PNPM_HOME="/pnpm"
# 将PNPM添加到系统PATH中
ENV PATH="$PNPM_HOME:$PATH"
# 启用PNPM包管理器
RUN corepack enable
# 将当前目录的所有文件复制到容器的/app目录
COPY . /app
# 设置工作目录为/app
WORKDIR /app

# 第二阶段：生产依赖安装
# 只安装生产环境需要的依赖包，减少镜像大小
FROM base AS prod-deps
# 使用缓存挂载安装生产依赖
# --mount=type=cache：使用Docker构建缓存
# id=pnpm：缓存标识符
# target=/pnpm/store：缓存存储位置
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod

# 第三阶段：应用构建
# 构建前端应用，生成静态文件
FROM base AS build
# 从prod-deps阶段复制已安装的node_modules
COPY --from=prod-deps /app/node_modules /app/node_modules
# 安装所有依赖（包括开发依赖）并构建应用
# 使用缓存加速构建过程
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install && pnpm run build

# 第四阶段：最终镜像
# 使用Nginx作为Web服务器
FROM nginx:alpine
# 设置镜像维护者信息
LABEL MAINTAINER="bypanghu@163.com"
# 从base阶段复制Nginx配置文件到容器
# 这个配置文件包含了API代理等设置
COPY --from=base  /app/.docker-compose/nginx/conf.d/my.conf /etc/nginx/conf.d/my.conf
# 从build阶段复制构建后的静态文件到Nginx的默认目录
COPY --from=build  /app/dist /usr/share/nginx/html
# 列出静态文件目录内容，用于验证构建是否成功
RUN ls -al /usr/share/nginx/html
